<template>
    <div class="box">
        <el-icon :size="20" v-show="modelValue">
            <component :is="modelValue"></component>
        </el-icon>
        <el-select :modelValue="modelValue" filterable @change="changeHandler">
            <el-option 
            v-for="item in icons" 
            :key="item" 
            :label="item" 
            :value="item">
                <div>
                    <el-icon>
                        <component :is="item"></component>
                    </el-icon>
                    <span>{{ item }}</span>
                </div>
            </el-option>
        </el-select>
    </div>
</template>
<script setup lang="ts">
import * as iconList from '@element-plus/icons-vue'
import { ref, reactive } from 'vue'

const icons = ref(Object.keys(iconList))

const emit = defineEmits(['modelValue'])
const changeHandler = (icon:string) => { 
    emit('modelValue',icon)
}

defineProps({
    modelValue: String
})

</script>
<style scoped lang="scss">
.box {
    display: flex;
    align-items: center;
}
</style>